<template>
	<el-container>
		<el-aside>
			<el-menu class="el-menu-vertical-demo" :default-active="$route.path" mode="vertical" :router="true">
				<h3>2025工程化项目训练</h3>
				<el-menu-item :index="item.path" v-for="(item,index) in menuList" :key="index">
					<template #title>
						<i :class="`iconfont ${item.icon}`"></i>
						<span>{{item.label}}</span>
					</template>
				</el-menu-item>
			</el-menu>
		</el-aside>
		<el-main>
			<router-view name="home"></router-view>
		</el-main>
	</el-container>
</template>
<script>
	import {
		mapState
	} from 'pinia';
	import {
		useLoginStore
	} from "../store";
	import {
		ElContainer,
		ElAside,
		ElMain,
		ElMenu,
		ElMenuItem
	} from "element-plus"
	export default {
		data() {
			return {
				menuList: [{
						path: "/",
						label: "学生管理",
						icon: "icon-xingzhuanggongnengtubiao-"
					},
					{
						path: "/teacher",
						label: "教师管理",
						icon: "icon-woderencai"
					},
					{
						path: "/choice",
						label: "选择导师",
						icon: "icon-kaoqindaqia"
					},
					{
						path: "/choiceStudent",
						label: "选择学生",
						icon: "icon-shoucang"
					},
					{
						path: "/chat",
						label: "AI聊天",
						icon: "icon-xiaoxi"
					},
					{
						path: "/about",
						label: "关于",
						icon: "icon-guanyu"
					}
				]
			}
		},
		computed: {
			...mapState(useLoginStore, ["userInfo"])
		}
	}
</script>

<style scoped>
	.el-menu-vertical-demo:not(.el-menu--collapse) {
		width: 200px;
		min-height: 400px;
	}
</style>